
/* valid both vertically and horizontally */
.scroller {
	margin: 0;
	padding: 0;
}

.scroller ul {
	display: block;
	float: left;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	list-style: none;
}

.scroller li {
	display: block; 
	float: left;
	padding: 0;
	margin: 0; 
	text-align: center;
	/*background-color: #f5f5f5; */
	/* font-size: 120px; */
}

/* only for vertical scrolling */
#verticalWrapper {
	width: 100%;     /* will be the same as the width of the content area */
	height: 240px;   /* will be changed by JavaScript to the height of the content area */
	overflow: auto;
}

#verticalScroller {
	width: 100%;
	height: 3240px;  /* max number scroll elements + 1 times their height */
	background-color: #f00;
}

#verticalScroller li {
	width: 100%;
	height: 120px;  /* this is the height of an individual element */
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #fff;
}

/* only for horizontal scrolling */
.horizontalWrapper {
	width: 100%;
	height: 138px;    /* will be changed by JavaScript to the height of the content area */
	overflow: auto;
}

.horizontalScroller {
	width: 3240px;  /* max number scroll elements + 1 times their width */
	height: 100%;   /* it will be the same as the wrapper's height even after it is changed */
	/* background-color: #0f0; */
}

.horizontalScroller li {
	width: 120px;       /* this is the width of an individual element */
	height: 100%;
	/*
	border-left: 1px solid #ccc;
	border-right: 1px solid #fff;
	*/
}
